<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .first {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .password {
            width: 10%;
            height: 10%;
        }
        #button {
            width: 5%;
            height: 12%;
            margin-left: 1%;
            background-color: #5cf;
            border: 0;
            
        }
        .last {
            /* 默认隐藏 */
            display: none;
        }
        .commons {
                margin: 0 auto;
                height: 200px;
                width: 80%;
                /* background-color: #1a1; */
                border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="first commons">
        <input type="password" placeholder="请输入密码" class="password">
        <button id="button">确定</button>
    </div>
    <div class="last commons">
        啦啦啦啦啦啦啦啦啦啦
    </div>
   
    <script>
        /* 需求 用户输入密码
        点击确定
        判断 密码是否正确19939
        如果正确就隐藏自身 然后显示文字内容
        如果不正确 给出提示清空密码框
         */
        //  获取输入框
     const password = document.querySelector('.password')
    // 给button点击事件
        document.getElementById('button').onclick=(data) => {
            // console.log('我被点击了', password.value, data); // 点击生效
            // 判断密码
            // 如果等于
            if (password.value === '19939') {
                // 如果等于就隐藏自身 显示需要显示的内容
                document.querySelector('.first').style.display = 'none'
                // 显示文本
                document.querySelector('.last').style.display ='block'
            } else {
                // 如果失败给出提示
                alert('密码错误')
                // 清空内容
                password.value =''
            }
        }
    </script>
</body>
</html>